

<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
        
<style type="text/css">
#map
{
  margin: 10px;
  padding: 10px;
  width: 100%;
  height: 400px;
  border: 1px solid #DDDDDD;
}


#toolBar
{
   height: 40px;
   border: 1px solid #DDDDDD;
   width: 100%;
  
}
#toolBar ul
{
  list-style-type: none;
   margin: 3px;
   padding: 0;
   line-height: 4px;
}
#toolBar li 
{
  display: inline-block;
  
}
#toolBar div
{
  display: inline-block;
}



.img-polygon:hover,
.img-line:hover,
.img-pan:hover,
.img-point:hover,
.img-point-on:hover,
.img-polygon-on:hover,
.img-line-on:hover,
.img-pan-on:hover
{
  cursor: pointer;

}

.img-polygon
{
  background-image: url("../img/gis/draw_polygon_off.png");
  background-repeat: no-repeat;
  height: 30px;
  width:30px;
}
.img-polygon-on
{
  background-image:url("../img/gis/draw_polygon_on.png");
  background-repeat: no-repeat;
  height: 30px;
  width: 30px;

}
.img-line
{
  background-image: url("../img/gis/draw_line_off.png");
  background-repeat: no-repeat;
  height: 30px;
  width: 30px;
}
.img-line-on
{
  background-image: url("../img/gis/draw_line_on.png");
  background-repeat: no-repeat;
  height: 30px;
  width: 30px;

}
.img-point
{
   background-image: url("../img/gis/draw_point_off.png");  
   background-repeat: no-repeat;
   height: 30px;
   width: 30px;

}

.img-point-on
{
  background-image: url("../img/gis/draw_point_on.png");
  background-repeat: no-repeat;
  height: 30px;
  width: 30px;
}
.img-pan
{
  background-image: url("../img/gis/pan_off.png");
  background-repeat: no-repeat;
  height: 30px;
  width: 30px;
}
.img-pan-on
{
 background-image: url("../img/gis/pan_on.png");
 background-repeat: no-repeat;
 height: 30px;
 width: 30px;

}

</style>




<script type="text/javascript">
$(document).ready(function(e)
{
	  $('#accordion').accordion();
   
   //jqxtree
   $('#jqxtree').jqxTree({
     height:'400px',
     hasThreeStates:true,
     checkboxes:true

   }); 
    
  //navigationBar
  $('#jqxNavigationBar').jqxNavigationBar({
    width:200
  });


});
</script>

<script type="text/javascript">
$(document).ready(function(e)
{

  /*********************************************************/

  /**
    * function with disabled elements 
    * of toolBar the gis
    **/
  function disabledElementToolBarGis(divEnable)
  {
    $("#toolBar ul li div").each(function(){
     
      var idElement=$(this).attr("id");
      if(divEnable!=idElement)
      {
        $(this).prop('disabled',true);
      }
      
    });
  } 

  /**
    * function with enabled elements
    * of toolBar the gis
    **/
  function enabledElementToolBarGis()
  { $("#toolBar ul li div").each(function(){
     
        $(this).prop('disabled',false);
      
    });
    

  }

  /****************************************/
  /******** ToolBar Gis Events ************/
  /****************************************/

  $("#img-point").live('click',function(event)
  {
     
     var classClick=$(this).attr('class'); 
     console.log("Click img-point classClick "+classClick);
     if(classClick=='img-point')
     {
      console.log("img-point");
    
     $(this).addClass("img-point-on").removeClass("img-point");
      drawPoints.activate();
      disabledElementToolBarGis($(this).attr("id")); 
    }else
    {

      console.log("img-point-on");
      //remove 
      $(this).addClass("img-point").removeClass("img-point-on");  
      drawPoints.deactivate();
      enabledElementToolBarGis();

    }
  
  });

  
  $("#img-line").live('click',function(event)
  {
     
     console.log("informacion de datos2 ");
     var classClick=$(this).attr('class');

     if(classClick=='img-line')
     {
       console.log("img-line");
       $(this).addClass("img-line-on").removeClass('img-line');
       drawLine.activate();
     }
     else
     {
       $(this).addClass('img-line').removeClass('img-line-on');
       drawLine.deactivate();
     
     }

  });

  $("#img-polygon").live('click',function(event)
  {
     
     var classClick=$(this).attr('class');
     if(classClick=='img-polygon')
     {
         console.log("img-polygon-on");
         $(this).addClass("img-polygon-on").removeClass("img-polygon");
         drawPolygon.activate();
     }else
     {
         console.log("img-polygon");
         $(this).addClass("img-polygon").removeClass("img-polygon-on");
         drawPolygon.deactivate();
     
     }
     

  });

  $("#img-pan").live('click',function(event)
  {
     
      var classClick=$(this).attr('class');
      if(classClick='img-pan')
      {
         $(this).addClass("img-pan-on").removeClass("img-pan");
         

     }else
     {
        $(this).addClass("img-pan").removeClass("img-pan-on");


     }
     $("#img-line").prop('disabled',true);
     $("#img-polygon").prop('disabled',true);
     $("#img-pan").prop('disabled',true);


  });

});


</script>



<div id="col_right">
<div id="toolBar">

 <ul>
  <li><div class="img-point" id="img-point"></div></li>
  <li><div class="img-polygon" id="img-polygon"></div></li>
  <li><div class="img-line" id="img-line"></div></li>
  <li><div class="img-pan" id="img-pan"></div></li>
  <li><div class="img-zoom" id="img-zoom"></div></li>
</ul>
</div>
<div id="map_controlMousePosition_external" style="{size:12px;}"></div>
<div id="map"></div>

<script  defer="defer" type="text/javascript">
  var map=new OpenLayers.Map('map',{controls:[]});

  

   //**************************************************
   //********* Layers *********************************  
   //map base layer 
   var layer_base=new OpenLayers.Layer.WMS(
       "OpenLayers WMS",
      "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'});
    
   //layers 
   var layer_satellite=new OpenLayers.Layer.Google(
   "Google Satellite",
   {type:google.maps.MapTypeId.SATELLITE});

    //layers controls
    var vector_layer=new OpenLayers.Layer.Vector("Editable");
    var vector_layerPoint=new OpenLayers.Layer.Vector("Points Layer");
    var vector_layerLine=new OpenLayers.Layer.Vector("Line Layer");
    var vector_layerPolygon=new OpenLayers.Layer.Vector("Polygon Layer");
    var vector_layerPan=new OpenLayers.Layer.Vector("Pan Layer");
    var vector_layerZOom=new OpenLayers.Layer.Vector("Zoom Layer");
    
   //addLayers
    map.addLayers([layer_base,layer_satellite,vector_layerPoint,vector_layerLine,vector_layerPolygon])
    map.setCenter(new OpenLayers.LonLat(5, 40), 5);
    
   //Layer DrawFeature 
    var vectorLayer=new OpenLayers.Layer.Vector("Points");

    map.addLayers([layer_base,layer_satellite,vectorLayer]);
    map.setCenter(new OpenLayers.LonLat(5, 40), 5);
   
    


     var map_controlMousePosition_external=new OpenLayers.Control.MousePosition(
     { 
      div :document.getElementById('map_controlMousePosition_external')
     });
     
 
    //draw Controls
    var drawPoints=new OpenLayers.Control.DrawFeature(vector_layerPoint,OpenLayers.Handler.Point);
    var drawLine=new OpenLayers.Control.DrawFeature(vector_layerLine,OpenLayers.Handler.Path);
    var drawPolygon=new OpenLayers.Control.DrawFeature(vector_layerPolygon,OpenLayers.Handler.Polygon);
    //var drawPan=new OpenLayers.Control.DrawFeature(vector_layerPan,OpenLayers.Handler.)


     //addControls
     map.addControl(drawPoints);
     map.addControl(drawLine);
     map.addControl(drawPolygon);
     map.addControl(map_controlMousePosition_external);
     map.addControl(new OpenLayers.Control.DragPan());
     map.addControl(new OpenLayers.Control.LayerSwitcher());

    

    function getVerticesPoint()
    {

      console.log("informacino de datos");
      var nodes=vector_layerLine.features;
      
       console.log("cantidad de valores :"+vector_layerPoint.features.length);
      for(var i=0;i<vector_layerPoint.features.length;i++)
      {

        //var futures=vector_layerPoint.features[i].geometry.getVertices();
        console.log("futures "+vector_layerPoint.features[i].geometry.getVertices()+" i :"+i);
        console.log("X: "+vector_layerPoint.features[i].geometry.getVertices()[i].x);
        console.log("Y: "+vector_layerPoint.features[i].geometry.getVertices()[i].y);
      }
    }

      function getVerticesLine()
      {

        for(var i=0; i<vector_layerLine.features.length;i++)
        {

          console.log("Line :"+vector_layerLine.features[i].geometry.getVertices());

        }
      }
    

</script>

<input type="button" value="Point" onClick="getVerticesPoint()"></input>
<input type="button" value="Line" onClick="getVerticesLine()"></input>

</div>